import React, { Component } from 'react';
import { StyleSheet, View, FlatList, TouchableOpacity, Image, Text } from "react-native";
import { GLOBAL } from '../../../../config/global';
import { orderStyle } from '../_common/style';
import { PageStatusIndex } from '../../../../component/page-status/PageStatusIndex';
import OrderDetailsService from '../_common/service';
import { TopShowCpt } from '../_components/TopShowCpt';
import { PayItemCpt } from '../_components/PayItemCpt';
import { CURRENCY } from '../../../../utils/helper';
import MethodUtil from '../../../../utils/MethodUtil';
import { Common } from '../../../../component/common/Common';
import { style } from "../../../../theme/style";

const scale = GLOBAL.SCALE;

export class OrderPaymentComponent extends Component {
	static navigationOptions = {
		header: null
	}

	constructor(props) {
		super(props);
		console.log('付款/收款页面参数', props);
		let { orderType, orderId, tCode } = this.props.data || {};
		this.propsSend = { orderType, orderId, tCode };
		this.state = {
			status: 'loading',
			payData: null,
			stateModal: false, // 状态弹框
		}
		this.sendData = {
			pageNo: 1,
			pageSize: 20,
			totalPage: 0,
		}
		this.stateIndex = 0;//初始化状态
		this.stateData = [
			{ dictKey: null, dictName: "全部状态" },
			{ dictKey: "30", dictName: "审批中" },
			{ dictKey: "40", dictName: "审核通过" },
			{ dictKey: "50", dictName: "驳回" },
			{ dictKey: "65", dictName: "付款中" },
			{ dictKey: "70", dictName: "已付款" }
		]
	}

	async	componentWillMount() {
		this._init();
	}

	componentWillUnmount() {

	}

	//初始化
	_init = () => {
		this._getPoolData();
		this._getListData();
	}

	// 获取数据汇总
	_getPoolData = async () => {
		let responseData = await OrderDetailsService.slowPool({ orderId: this.propsSend.orderId });
		console.log('付/收款汇总数据', responseData)
		if (!responseData) return;
		this.setState({ poolData: responseData })
	}

	//获取数据列表
	_getListData = async () => {
		let responseData = await OrderDetailsService.slowListDetail({ orderId: this.propsSend.orderId, paymentApplyStatus: this.stateData[this.stateIndex].dictKey || null });
		console.log('付/收款列表数据', responseData)
		if (responseData && responseData.length) {
			this.setState({ payData: responseData })
		} else {
			this.setState({ status: 'empty', payData: null })
		}

		//this.sendData.totalPage = responseData.totalPage;
	}

	// 一条数据模版
	_renderPayItemView = (customer) => {
		return (
			<PayItemCpt type={'PAY'} isTop0={this.propsSend.orderType == 'P'?true:false} data={{ itemData: customer.item || {}, flagData: { orderType: this.propsSend.orderType } }} />
		)
	}

	// 下拉更新函数
	_onEndPayReached = () => {
		if (this.sendData.pageNo < this.sendData.totalPage) {
			this.sendData.pageNo++;
			this._getListData();
		}
	}

	//选择状态 回掉函数
	_stateCallBack = (index) => {
		this.stateIndex = index;
		this.setState({
			stateModal: false
		}, () => {
			//页面重新初始化
			this._getListData();
		})
	}

	//打开模态框
	_selecOpen = () => {
		this.setState({
			stateModal: true
		})
	}

	//选择状态 弹框关闭
	_closeModal = () => {
		this.setState({
			stateModal: false
		})
	}

	render() {
		let { status, payData, poolData, stateModal } = this.state;
		let { orderAmount, realAmount, payReceiptAmount, unRealAmount, currency } = poolData || {};
		return (
			<View style={orderStyle.container}>
				<View style={orderStyle.scollBox}>
					<View style={orderStyle.showBox}>
						<TopShowCpt data={{
							propsSend: this.propsSend,
							imgData: { big: realAmount, small: payReceiptAmount },
							listData: [
								{ title: `下单金额`, value: `${orderAmount == null ? '-' : MethodUtil.toThousands(orderAmount)}${orderAmount == null ? '' : CURRENCY.getUnit(currency).text}` },
								{ icon: true, title: `${this.propsSend.orderType == 'S' ? '应收' : '应付'}金额`, value: `${realAmount == null ? '-' : MethodUtil.toThousands(realAmount)}${realAmount == null ? '' : CURRENCY.getUnit(currency).text}` },
								{ title: `${this.propsSend.orderType == 'S' ? '实收' : '实付'}金额`, value: `${payReceiptAmount == null ? '-' : MethodUtil.toThousands(payReceiptAmount)}${payReceiptAmount == null ? '' : CURRENCY.getUnit(currency).text}` },
								{ title: `待${this.propsSend.orderType == 'S' ? '实收' : '实付'}`, value: `${unRealAmount == null ? '-' : MethodUtil.toThousands(unRealAmount)}${unRealAmount == null ? '' : CURRENCY.getUnit(currency).text}`, color: true }
							]
						}} />
					</View>

					<View style={[{ flex: 1, position: 'relative' }, this.propsSend.orderType == 'P' ? { paddingTop: 20 * scale } : null]}>
						{
							this.propsSend.orderType == 'P' ? <View style={styles.statusBox}>
								<TouchableOpacity style={styles.statusItem} onPress={this._selecOpen}>
									{this.stateData && <Text style={styles.statusTextSelect}>{(this.stateData[this.stateIndex] && this.stateData[this.stateIndex].dictName) || '全部状态'}</Text>}
									<Image source={require('../../../../imgs/select.png')} />
								</TouchableOpacity>
							</View> : null
						}
						{payData ? (
							<View>
								<FlatList
									data={payData}
									extraData={this.state}
									renderItem={this._renderPayItemView}
									onEndReachedThreshold={0.5}
									onEndReached={this._onEndPayReached}
								/>
							</View>
						) : <PageStatusIndex status={status} emptyText={'暂无数据'} />}
					</View>
				</View>
				<Common type="modal" demoData={(
					<Common type="listRadio" selectIndex={this.stateIndex} title="选择状态" listData={this.stateData} selectCallBack={this._stateCallBack} />
				)} isVisible={stateModal} closeCallballFn={() => { this._closeModal({ stateModal }) }} />
			</View >
		)
	}
}

const styles = StyleSheet.create({
	statusBox: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
		height: 30 * scale,
		backgroundColor: style.color.bgGray,
	},
	statusItem: {
		flexDirection: 'row',
		alignItems: 'center',
		paddingLeft: 12 * scale,
		marginRight: 12 * scale
	},
	statusTextSelect: {
		color: '#0E7FFD',
		fontWeight: 'bold',
		marginRight: 10 * scale,
		fontSize: 14 * scale
	},
	statusItemText: {
		fontSize: 12 * scale,
		// color: '#fff'
	},
	statusItemTextActive: {
		paddingLeft: 3 * scale,
		paddingRight: 3 * scale
	},
	statusItemImg: {
		marginLeft: 5 * scale,
		// tintColor: '#fff'
	},
})

